﻿<%@ Page Title="Nhân viên" Language="C#" MasterPageFile="~/Administration/BackEnd.Master" AutoEventWireup="true" CodeBehind="List.aspx.cs" Inherits="MonkeyShop.Web.Administration.Employees.List" %>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <div class="filtering">
        Tên:
        <input type="text" name="name" id="name" />
        <button type="submit" id="LoadRecordsButton">Tải dữ liệu</button>
        <button type="submit" id="ResetButton">Reset</button>
    </div>
    <input type="button" value="Thêm mới" onclick="javascript: window.location = 'New.aspx';" />
    <div id="EmployeesTableContainer">
    </div>
    <input type="button" value="Thêm mới" onclick="javascript: window.location = 'New.aspx';" />
    
    <script type="text/javascript">
        $(document).ready(function () {
            $('#EmployeesTableContainer').jtable({
                title: 'Nhân viên',
                paging: true,
                pageSize: 10,
                sorting: true,
                defaultSorting: 'Id ASC',
                actions: {
                    listAction: 'List.aspx/EmployeeList',
                    deleteAction: 'List.aspx/DeleteEmployee'
                },
                fields: {
                    Id: {
                        key: true,
                        create: false,
                        edit: false,
                        list: true,
                        title: 'STT'
                    },
                    Name: {
                        title: 'Tên',
                        width: '30%'
                    },
                    UserName: {
                        title: 'Username'
                    },
                    MailAddress: {
                        title: 'Email',
                        sorting: false
                    },
                    PhoneNumber: {
                        title: 'Phone',
                        sorting: false
                    },
                    Hidden: {
                        title: 'Ẩn',
                        width: '10%',
                        type: 'checkbox',
                        values: { 'false': 'NO', 'true': 'YES' },
                        defaultValue: 'false',
                        sorting: false
                    },
                    Edit: {
                        title: '',
                        width: '1%',
                        display: function (data) {
                            return '<input title="Cập nhật" class="jtable-command-button jtable-edit-command-button" onclick="javascript:window.location=\'Edit.aspx?id=' + data.record.Id + '\';" />';
                        },
                        sorting: false
                    }
                }
            });

            //Re-load records when user click 'load records' button.
            $('#LoadRecordsButton').click(function (e) {
                e.preventDefault();
                $('#EmployeesTableContainer').jtable('load', {
                    name: $('#name').val()
                });
            });

            // Reset button
            $('#ResetButton').click(function (e) {
                e.preventDefault();
                $('#name').val('');
                $('#LoadRecordsButton').click();
            });

            //$('#EmployeesTableContainer').jtable('load');
            //Load all records when page is first shown
            $('#LoadRecordsButton').click();
        });
    </script>
</asp:Content>
